<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>俩万 - 注册</title>
    <link rel="shortcut icon" th:href="@{/static/img/favicon.ico}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/vali/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/toast/jquery.toast.css}">
    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
</head>
<body style="background-color: #F2F2F2;">
<div class="col-md-12" th:if="${isInstall == false}">
    <div class="row mt-5">
        <div class="col-md-8 offset-md-2">
            <h1 class="font-weight-bold text-center"
                style="font-family: 'verdana'">
                liawan&nbsp; <small class="font-weight-bold"
                                    style="font-family: 'verdana'">注册</small>
            </h1>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-md-8 offset-md-2">
            <div class="tile">
                <form class="form-horizontal" id="installForm">
                    <div class="form-group row">
                        <label class="col-form-label font-weight-bold col-md-3">博客标题：</label>
                        <div class="col-md-9">
                            <input class="form-control" type="text" name="blogName">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label font-weight-bold col-md-3">博客地址：</label>
                        <div class="col-md-9">
                            <input class="form-control" type="text" name="blogUrl">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label font-weight-bold col-md-3">电子邮箱：</label>
                        <div class="col-md-9">
                            <input class="form-control" type="text" name="emailUsername">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label font-weight-bold col-md-3">用户名：</label>
                        <div class="col-md-9">
                            <input class="form-control" type="text" name="userName">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label font-weight-bold col-md-3">显示昵称：</label>
                        <div class="col-md-9">
                            <input class="form-control" type="text" name="userDisplayName">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label font-weight-bold col-md-3">登录密码：</label>
                        <div class="col-md-9">
                            <input class="form-control" type="password" name="nowPwd">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label font-weight-bold col-md-3">确认密码：</label>
                        <div class="col-md-9">
                            <input class="form-control" type="password" name="confirmPwd">
                        </div>
                    </div>
                    <div class="tile-footer">
                        <div class="row">
                            <div class="col-md-12">
                                <button class="btn btn-sm btn-light float-right" id="install_btn" type="button"
                                        onclick="install()">
                                    <i class="fa fa-fw fa-lg fa-check-circle"></i>确定
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:unless="${isInstall != true}">
    <h3>你已经注册过了，请直接登录</h3>
</div>
<div th:replace="admin/module/macros :: comm"></div>
<div th:replace="admin/module/macros :: bootstrapValidator"></div>
<script type="text/javascript">
    $(function () {
        $("#installForm").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                blogName: {
                    message: '博客标题验证失败',
                    validators: {
                        notEmpty: {
                            message: '博客标题不能为空'
                        }
                    }
                }, blogUrl: {
                    message: '博客地址验证失败',
                    validators: {
                        notEmpty: {
                            message: '博客地址不能为空'
                        }
                    }
                }, emailUsername: {
                    message: '电子邮箱验证失败',
                    validators: {
                        notEmpty: {
                            message: '电子邮箱不能为空'
                        }
                    }
                }, userName: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                }, userDisplayName: {
                    message: '显示名称验证失败',
                    validators: {
                        notEmpty: {
                            message: '显示名称不能为空'
                        }
                    }
                }, nowPwd: {
                    message: '登录密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '登录密码不能为空'
                        }
                    }
                }, confirmPwd: {
                    message: '确认密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '确认密码不能为空'
                        }
                    }
                },
            }
        }).on('success.form.bv', function (e) {
            // 阻止默认事件提交
            e.preventDefault();
        });

    })

    function install() {
        var bootstrapValidator = $("#installForm").data("bootstrapValidator");
        bootstrapValidator.validate();
        if (bootstrapValidator.isValid()) {
            var obj = $("#installForm").serialize();
            loadingText("install_btn", "注册中...");
            $.ajax({
                type: "POST",
                url: "/install/execute",
                data: obj,
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.flag == true) {
                        $.toast({
                            text: data.msg,
                            heading: '提示',
                            icon: 'success',
                            showHideTransition: 'fade',
                            allowToastClose: true,
                            hideAfter: 1000,
                            stack: 1,
                            position: 'top-center',
                            textAlign: 'left',
                            loader: true,
                            loaderBg: '#ffffff',
                            afterHidden: function () {
                                window.location.href = "/";
                            }
                        });
                    } else {
                        loadingBack("install_btn", "注册");
                        showMsg(data.msg, "error", 3000);
                    }
                }, error: function (data) {
                    loadingBack("install_btn", "注册");
                    showMsg("注册失败", "error", 3000);
                }
            })
        }
    }
</script>
</body>
</html>